<template>
  <div>
    <ElDialog
      top="20px"
      width="90%"
      :title="props.title"
      @close="emitClose"
      v-model="visible"
      :destroy-on-close="true"
      class="my-dialog"
    >
      <slot />
      <template #footer>
        <ElButton
          type="danger"
          v-show="props.showCancelBtn"
          @click="handleCancelClick"
          >关闭</ElButton
        >
        <ElButton
          type="success"
          v-show="props.showConfirmBtn"
          @click="handleConfirmClick"
          >保存</ElButton
        >
      </template>
    </ElDialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, useSlots } from "vue";
defineOptions({
  name: "MyDialog",
});
const slot = useSlots();
const props = withDefaults(
  defineProps<{
    title?: string;
    visible: boolean;
    showCancelBtn?: boolean;
    showConfirmBtn?: boolean;
    handleConfirmClick?: Function;
  }>(),
  {
    title: "弹框",
    visible: false,
    showCancelBtn: true,
    showConfirmBtn: true,
  }
);
const handleConfirmClick = async () => {
  if (props.handleConfirmClick) {
    const flag = await props.handleConfirmClick(slot);
    if (flag) {
      visible.value = false;
    }
  }
};
const handleCancelClick = () => {
  emit("update:visible", false);
};

const emit = defineEmits(["update:visible", "close"]);

const visible = computed({
  get: () => {
    return props.visible;
  },
  set: (val) => {
    emit("update:visible", val);
  },
});
const emitClose = () => {
  emit("close");
};
</script>

<style scoped>
:deep(.el-dialog__body) {
  height: calc(100vh - 250px) !important;
  padding: 0 !important;
  background-color: #f5f5f5;
}
</style>
